<template>
    <!-- 详情页 -->
    <view class="good_detail_container">
        <!-- 商品大图 -->
        <view class="banner_img">
            <image class="img" :src="goodsDetail.imageUrl" mode="aspectFit"></image>
        </view>
        <!-- 商品info -->
        <view class="good_info">
            <view class="price">
                <view class="price_num">￥ {{ goodsDetail.price }}</view>
                <view class="price_origin_num">￥{{ goodsDetail.marketPrice }}</view>
            </view>
            <view class="title">{{ goodsDetail.floralLanguage }}</view>
            <view class="desc">{{ goodsDetail.name }}</view>
        </view>
        <!-- 商品详情 -->
        <view class="good_detail">
            <image class="img" v-for="item in goodsDetail.detailList" :src="item" mode="aspectFit" wx:key="index"></image>
        </view>
        <!-- 底部选项区域 -->
        <view class="good_footer flex">
            <view class="bottom_left flex">
                <navigator url="/pages/index/index" open-type="navigateBack">
                    <view class="icon_wrap flex">
                        <uni-icons type="home-filled" custom-prefix="iconfont" size="30"></uni-icons>
                        <text>首页</text>
                    </view>
                </navigator>
                <navigator url="/pages/carList/carList" open-type='switchTab'>
                    <view class="icon_wrap flex">
                        <uni-icons type="shop-filled" custom-prefix="iconfont" size="30"></uni-icons>
                        <text>收藏车</text>
                    </view>
                </navigator>
            </view>
            <view class="bottom_right flex">
                <view class="add_shop_cart" bindtap="addCart" @click="open">加入购买</view>
                <view class="buy_now" bindtap="addShop">立即购买</view>
            </view>
        </view>


        <!-- 祝福语弹窗区域 -->
        <uni-popup ref="popup">
            <view class="sheet_wrapper">
                <!-- 商品信息 -->
                <view class="goods_item flex">
                    <image class="img mid" src="http://39.98.123.211:8300/images/1-1-2.png"></image>
                    <view class="info flex">
                        <view class="title">玫瑰系列</view>
                        <view class="buy">
                            <view class="price">
                                <view class="symbol">￥</view>
                                <view class="num">{{ 1288 }}</view>
                            </view>
                            <!-- 立即购买的时候不显示数量添加 -->
                            <view class="buy-btn" style="minWidth:400rpx;" wx:if="{{showCount}}">
                                <van-stepper value="{{ count }}" bind:change='countChange' />
                            </view>
                        </view>
                    </view>
                </view>
                <!-- 祝福语 -->
                <view class="time-wraper">
                    <view class="title">祝福语</view>
                    <textarea model:value="{{blessing}}" class="form-textarea"
                        placeholder="必填，写上您的祝福语，给心爱的他（她）送上你的祝福（请勿填写特殊符号或表情符号）" name="textarea" />
                </view>
                <view class="sheet-footer-btn">
                    <van-button block type="primary" round bindtap="AddShopCart">确定</van-button>
                </view>
            </view>
        </uni-popup>
    </view>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
    name: 'detail',
    methods: {
        open() {
            this.$refs.popup.open('top')
        }
    }
})
</script>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app'
import { getGoodsDetail } from '../../../Api/goods'


// 数据
const goodsDetail = ref<any>({})
// 判断添加还是购买
const showCount = ref(true)
// 祝福语
const blessing = ref('')
// 控制显示隐藏弹出层
const isShowSheet = ref(false)

onLoad((e: any) => {
    getDetail(e.goodsId)
})
// 获取详情数据
async function getDetail(id: number) {
    try {
        const res = await getGoodsDetail(id)
        if (res.code === 200) {
            goodsDetail.value = res.data
        }
    } catch (error) {
        console.log(error)
    }
}


</script>

<style scoped>
/* pages/goods/detail/detail.wxss */
.good_detail_container {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    background: #eee;
}

.banner_img {
    width: 100%;
    height: 490rpx;
}


.banner_img image {
    display: block;
    margin: 0 auto;
}

/* 商品info */
.good_info {
    position: relative;
    top: -80rpx;
    background: #fff;
    padding: 40rpx;
    border-radius: 40rpx;
    margin: 0 40rpx;
}

.price {
    display: flex;
}

.price_num {
    font-size: 36rpx;
    color: #fa4126;
    font-weight: bold;
}

.price_origin_num {
    font-size: 24rpx;
    color: #b4babf;
    margin-left: 4px;
    text-decoration: line-through;
    margin-top: 12rpx;
}


.title {
    font-size: 36rpx;
    font-weight: bold;
}

.desc {
    font-size: 24rpx;
    color: #999999;
}


/* 商品detial */
.good_detail {
    background: #f0f;
    padding: 40rpx;
    border-radius: 40rpx;
    margin: 40rpx;
    margin-top: -40rpx;
}

.good_detail image {
    width: 100%;
}


/* 底部选项区域 */
.good_footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #fff;
    padding: 20rpx 0;
}



.icon_wrap {
    flex-direction: column;
}

.icon_wrap text {
    font-size: 20rpx;
    color: #666;
}

.bottom_left {
    display: flex;
    width: 100%;
    justify-content: space-around;
}

/* 底部右侧 */
.bottom_right view {
    width: 254rpx;
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;

}

.add_shop_cart {
    background: #ffece9;
    color: #fa4126;
    border-radius: 40rpx 0 0 40rpx;
}

.buy_now {
    background-color: #fa4126;
    border-radius: 0rpx 40rpx 40rpx 0rpx;
    color: #fff;
}


/* 祝福语弹窗区域 */

.sheet_wrapper {
    padding: 40rpx;
}

.sheet_wrapper .goods_item {
    height: 250rpx;
    align-items: flex-end;
}

.goods_item .mid {
    width: 228rpx;
    height: 250rpx;

}

.goods_item .info {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: 0 40rpx;
    flex: 1;
}

.info .price {
    color: #fa4126;
}

.buy {
    display: flex;
    justify-content: space-between;
    align-items: center;

}


/* 祝福语 */

.time-wraper {
    margin: 40rpx 0;
}

.form-textarea {
    border-radius: 24rpx;
    background-color: #f7f8fa;
    padding: 32rpx 24px;
    font-size: 13px;
    margin-top: 24rpx;
    width: 94%;
    height: 168rpx;
}
</style>